<template>
	<view class="mine-container">
		<el-card class="box-card" style="width: 100%;">
			<div slot="header" class="clearfix" style="width: 100%;">
				<el-select class="select" v-model="selectedCategory" placeholder="合同类型" filterable
					:filter-method="dataFilter" clearable>
					<el-option v-for="item in contractCategory" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select class="select" v-model="selectedStatus" placeholder="合同状态" filterable
					:filter-method="dataFilter" clearable>
					<el-option v-for="item in contractStatus" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select class="select" v-model="selectedPaymentWay" placeholder="付款方式" filterable
					:filter-method="dataFilter" clearable>
					<el-option v-for="item in contractPaymentWay" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" @click="queryByFilter()"
					style="width: 55px; text-align:center; font-size: small;">搜索</el-button>
				<el-button type="info" plain @click="back()"
					style="width: 55px; text-align: center; font-size: small;">返回</el-button>
			</div>
			<div style="height: 1000px;">
				<el-col :span="18">
					<ul class="infinite-list" v-infinite-scroll="load" style="overflow:visible;">
						<li v-for="contract in contracts" class="infinite-list-item" style="width: 100%;">
							<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
								<view class="custom" @click="showContractDetail(contract.id)">
									<table>
										<tr>
											<td>
												{{contract.custom.company}}
											</td>
											<td>
												{{contract.custom.name}}
												<h4 class="level" style="float: left;">{{contract.custom.level}}</h4>
											</td>
										</tr>
										<tr>
											<td>合同名称：{{contract.name}}</td>
											<td>合同金额：{{contract.amount}}</td>
										</tr>
									</table>
									<p>签订时间：{{contract.signedTime}}</p>
									<p>到期时间：{{contract.expireTime}}</p>
								</view>
							</el-card>
						</li>
					</ul>
				</el-col>
			</div>
		</el-card>

	</view>
</template>

<script>
	import storage from '@/utils/storage'

	export default {
		data() {
			return {
				userId: 0,
				categorys: 0,
				contracts: [],
				contractCategory: [{
					value: '固定总价合同',
					label: '固定总价合同'
				}, {
					value: '买卖合同',
					label: '买卖合同'
				}, {
					value: '分包合同',
					label: '分包合同'
				}, {
					value: '计量合同',
					label: '计量合同'
				}],
				contractStatus: [{
					value: '签订中',
					label: '签订中'
				}, {
					value: '待通过',
					label: '待通过'
				}, {
					value: '已通过',
					label: '已通过'
				}, {
					value: '已废除',
					label: '已废除'
				}],
				contractPaymentWay: [{
					value: '银行卡',
					label: '银行卡'
				}, {
					value: '支付宝',
					label: '支付宝'
				}, {
					value: '现金',
					label: '现金'
				}, {
					value: '微信',
					label: '微信'
				}, {
					value: '云闪付',
					label: '云闪付'
				}],
				selectedCategory: '',
				selectedStatus: '',
				selectedPaymentWay: ''
			}
		},
		onLoad(options) {
			this.userId = uni.getStorageSync('id');
			this.categorys = options.categorys;
			this.selectedCategory = options.selectedCategory;
			this.selectedStatus = options.selectedStatus;
			this.selectedPaymentWay = options.selectedPaymentWay;
			console.log(this.userId + ' ' + this.categorys);
			// 获取用户的客户列表
			uni.request({
				url: 'http://localhost:8089/crmdemo/contract/queryContractByFilter', //仅为示例，并非真实接口地址。
				data: {
					userId: this.userId,
					categorys: this.categorys,
					category: this.selectedCategory,
					status: this.selectedStatus,
					paymentWay: this.selectedPaymentWay
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.contracts = res.data.result
					} else {
						this.$modal.msgError("获取用户合同列表失败")
					}
				}
			});
		},
		methods: {
			showContractDetail(contractId) {
				console.log(contractId);
				uni.navigateTo({
					url: '/pages/work/hetong/contractDetail?contractId=' + contractId
				})
			},
			queryByFilter() {
				console.log(this.selectedCategory + ' ' + this.selectedStatus + ' ' + this.selectedPaymentWay)
				uni.navigateTo({
					url: '/pages/work/hetong/showContract?categorys=' + this.categorys + '&selectedCategory=' + this
						.selectedCategory + '&selectedStatus=' + this.selectedStatus + '&selectedPaymentWay=' + this
						.selectedPaymentWay
				})
			},
			back() {
				uni.reLaunch({
					url: '/pages/work/index'
				})
			},
			dataFilter(value) {
				if (value) {
					//val存在
					this.options2 = this.options.filter((item) => {
						if (
							!!~item.name.indexOf(value) ||
							!!~item.name.toUpperCase().indexOf(value.toUpperCase()) ||
							!!~item.code.indexOf(value) ||
							!!~item.code.toUpperCase().indexOf(value.toUpperCase())
						) {
							return true;
						}
					});
				} else {
					//val为空时，还原数组
					this.options2 = this.options;
				}
			}
		}

	}
</script>






<style lang="scss">
	.level {
		border: 2px solid red;
		width: 17px;
		text-align: center;
	}

	table {
		width: 350px;
	}

	td {
		width: 100px;
		padding: 2px;
		border-bottom: 1px solid silver;
	}

	tr {
		border-bottom: 1px solid silver;
	}

	ul {
		list-style: none;
	}

	.select {
		width: 110px;
		margin-left: 2px;
	}

	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #3c96f3;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}
</style>